<script src="/Scripts/src/lib/extend/jsbeautify.js"></script>
<link href="/Scripts/src/style/jsoneditor.min.css" rel="stylesheet" />
<script src="/Scripts/src/lib/extend/jsoneditor.min.js"></script>
<div class="layui-fluid">
    <div class="layui-row layui-col-space5">
        <div class="layui-col-md12">

            <div class="layui-card" style="margin-bottom:5px">
                <div class="layui-card-header">表格列</div>
                <div class="layui-card-body">
                    <table id="tool-tableCols-table" lay-filter="tool-tableCols-table"></table>

                    <script type="text/html" id="tool-tableCols-align">
                        <input type="radio" name="align.{{d.field}}" title="左" value="" lay-filter="tool-tableCols-cellRadio" {{ !d.align ? 'checked' : '' }}>
                        <input type="radio" name="align.{{d.field}}" title="中" value="center" lay-filter="tool-tableCols-cellRadio" {{ d.align==="center" ? 'checked' : '' }}>
                        <input type="radio" name="align.{{d.field}}" title="右" value="right" lay-filter="tool-tableCols-cellRadio" {{ d.align==="right" ? 'checked' : '' }}>
                    </script>
                    <script type="text/html" id="tool-tableCols-sort">
                        <input type="checkbox" name="sort.{{d.field}}" value="true" lay-skin="switch" lay-text="是|否" lay-filter="tool-tableCols-cellSwitch" {{ d.sort ? 'checked' : '' }}>
                    </script>
                    <script type="text/html" id="tool-tableCols-fixed">
                        <input type="radio" name="fixed.{{d.field}}" title="左" value="left" lay-filter="tool-tableCols-cellRadio" {{ d.fixed==="left" ? 'checked' : '' }}>
                        <input type="radio" name="fixed.{{d.field}}" title="右" value="right" lay-filter="tool-tableCols-cellRadio" {{ d.fixed==="right" ? 'checked' : '' }}>
                        <input type="radio" name="fixed.{{d.field}}" title="无" value="" lay-filter="tool-tableCols-cellRadio" {{ !d.fixed ? 'checked' : '' }}>
                    </script>
                </div>
            </div>
            <div class="layui-card" style="margin-bottom:5px">
                <div class="layui-card-header">表格列编辑</div>
                <div class="layui-card-body">
                    <form class="layui-form form-label9" lay-filter="tool-tableCols-form">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    字段
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" name="field" fieldname="字段" placeholder="" lay-verify="required" lay-vertype="tips" maxlen="50" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    顺序
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" name="cellOrder" fieldname="顺序" placeholder="" lay-verify="required|int" minVal="1" maxVal="99" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    中文名
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" name="cellName" fieldname="中文名" placeholder="" lay-verify="required" lay-vertype="tips" maxlen="50" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    英文名
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" name="cellName_EN" fieldname="英文名" placeholder="" lay-verify="required" lay-vertype="tips" maxlen="100" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    templet
                                </label>
                                <div class="layui-input-inline">
                                    <script type="text/html" template lay-done="layui.form.render('select', 'tool-tableCols-form')">
                                        <select name="templet">
                                            <option value="">常用方法</option>
                                            {{#  layui.admin.getDataParams('sys-table-templet', function(data){layui.each(data,function(idx,item){ }}
                                            <option value="{{ item.Member }}">{{ item['MemberName'+layui.admin.lang] }}</option>
                                            {{#  })}) }}
                                        </select>
                                    </script>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-inline">
                                    <input type="button" lay-submit lay-filter="tool-tableCols-form-submit" value="更新或新增" class="layui-btn layui-btn-default">
                                    <input type="button" lay-submit lay-filter="tool-tableCols-form-del" value="删除" class="layui-btn layui-btn-danger layui-btn-default">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item" style="margin-bottom:0">
                            <label class="layui-form-label">
                                templetFun
                            </label>
                            <div class="layui-input-block">
                                <textarea name="templetFun" fieldname="templetFun" placeholder="" lay-verify="fun" lay-vertype="tips" autocomplete="off" class="layui-textarea"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="layui-card" style="margin-bottom:5px">
                <div class="layui-card-header">tableConfig</div>
                <div class="layui-card-body">
                    <form class="layui-form form-label9" lay-filter="tool-tableConfig-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                TableNo
                            </label>
                            <div class="layui-input-block">
                                <input type="text" name="TableNo" fieldname="TableNo" placeholder="" lay-verify="required" lay-vertype="tips" maxlen="50" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline" style="display:none">
                                <input type="hidden" name="TableID">
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    TableName
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" name="TableName" fieldname="TableName" placeholder="" lay-verify="required" lay-vertype="tips" maxlen="50" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    TableName_EN
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" name="TableName_EN" fieldname="TableName_EN" placeholder="" lay-verify="required" lay-vertype="tips" maxlen="100" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    tableType
                                </label>
                                <div class="layui-input-inline">
                                    <input type="radio" name="tableType" title="table" value="table" checked>
                                    <input type="radio" name="tableType" title="treeGrid" value="treeGrid">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    autoTool
                                </label>
                                <div class="layui-input-inline">
                                    <input type="checkbox" name="autoTool" fieldname="autoTool" value="true" lay-skin="switch" lay-text="是|否" checked>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    autoToolbar
                                </label>
                                <div class="layui-input-inline">
                                    <input type="checkbox" name="autoToolbar" fieldname="autoToolbar" value="true" lay-skin="switch" lay-text="是|否" checked>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    autoSearch
                                </label>
                                <div class="layui-input-inline">
                                    <input type="checkbox" name="autoSearch" fieldname="autoSearch" value="true" lay-skin="switch" lay-text="是|否" checked>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    autoForm
                                </label>
                                <div class="layui-input-inline">
                                    <input type="checkbox" name="autoForm" fieldname="autoForm" value="true" lay-skin="switch" lay-text="是|否" checked>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    numbers
                                </label>
                                <div class="layui-input-inline">
                                    <input type="checkbox" name="numbers" fieldname="numbers" value="true" lay-skin="switch" lay-text="是|否" checked>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    selectType
                                </label>
                                <div class="layui-input-block">
                                    <input type="radio" name="selectType" title="多选" value="checkbox" checked>
                                    <input type="radio" name="selectType" title="单选" value="radio">
                                    <input type="radio" name="selectType" title="无" value="">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                delUrl
                            </label>
                            <div class="layui-input-block">
                                <input type="text" name="delUrl" fieldname="delUrl" placeholder="" lay-verify="fillRequired" lay-vertype="tips" maxlen="100" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                clearUrl
                            </label>
                            <div class="layui-input-block">
                                <input type="text" name="clearUrl" fieldname="clearUrl" placeholder="" lay-verify="fillRequired" lay-vertype="tips" maxlen="100" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                toolFun
                            </label>
                            <div class="layui-input-block">
                                <textarea name="toolFun" fieldname="toolFun" placeholder="" lay-verify="obj" lay-vertype="tips" autocomplete="off" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                toolbarFun
                            </label>
                            <div class="layui-input-block">
                                <textarea name="toolbarFun" fieldname="toolbarFun" placeholder="" lay-verify="obj" lay-vertype="tips" autocomplete="off" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                tableEvent
                            </label>
                            <div class="layui-input-block">
                                <textarea name="tableEvent" fieldname="tableEvent" placeholder="" lay-verify="obj" lay-vertype="tips" autocomplete="off" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item" style="margin-bottom:0px">
                            <label class="layui-form-label">
                                options
                            </label>
                            <div class="layui-input-block">
                                <textarea name="options" fieldname="options" placeholder="" lay-verify="obj" lay-vertype="tips" autocomplete="off" class="layui-textarea"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item" style="display:none">
                            <label class="layui-form-label"></label>
                            <div class="layui-input-block">
                                <input type="button" lay-submit lay-filter="tool-tableConfig-form-submit" value="保存" class="layui-btn layui-btn-default">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="layui-card" style="margin-bottom:5px">
                <div class="layui-card-header">tableOptions</div>
                <div class="layui-card-body">
                    <form class="layui-form form-label9" lay-filter="tool-tableOptions-form">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    idField
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" name="idField" fieldname="idField" placeholder="" lay-verify="required" lay-vertype="tips" maxlen="50" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    isPage
                                </label>
                                <div class="layui-input-inline">
                                    <input type="checkbox" name="isPage" fieldname="isPage" value="true" lay-skin="switch" lay-text="是|否" checked>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    cellMinWidth
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" name="cellMinWidth" fieldname="cellMinWidth" placeholder="" value="140" lay-verify="int" lay-vertype="tips" minval="80" maxval="400" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    treeId
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" name="treeId" fieldname="treeId" placeholder="" lay-verify="fillRequired" lay-vertype="tips" maxlen="50" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    treeUpId
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" name="treeUpId" fieldname="treeUpId" placeholder="" lay-verify="fillRequired" lay-vertype="tips" maxlen="50" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    treeShowName
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" name="treeShowName" fieldname="treeShowName" placeholder="" lay-verify="fillRequired" lay-vertype="tips" maxlen="50" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                url
                            </label>
                            <div class="layui-input-block">
                                <input type="text" name="url" fieldname="url" placeholder="" lay-verify="required" lay-vertype="tips" maxVal="100" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                initSort
                            </label>
                            <div class="layui-input-block">
                                <input type="text" name="initSort" fieldname="initSort" placeholder="" lay-verify="obj" lay-vertype="tips" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                where
                            </label>
                            <div class="layui-input-block">
                                <textarea name="where" fieldname="where" placeholder="" lay-verify="obj" lay-vertype="tips" autocomplete="off" class="layui-textarea"></textarea>
                            </div>
                        </div>

                        <div class="layui-form-item" style="margin-bottom:0px">
                            <label class="layui-form-label">
                                options
                            </label>
                            <div class="layui-input-block">
                                <textarea name="options" fieldname="options" placeholder="" lay-verify="obj" lay-vertype="tips" autocomplete="off" class="layui-textarea"></textarea>
                            </div>
                        </div>

                        <div class="layui-form-item" style="display:none">
                            <label class="layui-form-label"></label>
                            <div class="layui-input-block">
                                <input type="button" lay-submit lay-filter="tool-tableOptions-form-submit" value="保存" class="layui-btn layui-btn-default">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="layui-card" style="margin-bottom:5px">
                <div class="layui-card-header">formOptions</div>
                <div class="layui-card-body">
                    <form class="layui-form form-label9" lay-filter="tool-formOptions-form">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    url
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" name="url" fieldname="url" placeholder="" lay-verify="fillRequired" lay-vertype="tips" maxlen="200" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    subUrl
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" name="subUrl" fieldname="subUrl" placeholder="" lay-verify="fillRequired" lay-vertype="tips" maxlen="200" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    formLay
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" name="formLay" fieldname="formLay" placeholder="" lay-verify="fillRequired" lay-vertype="tips" maxlen="50" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    formWidth
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" name="width" fieldname="formWidth" placeholder="" lay-verify="int" lay-vertype="tips" minval="60" maxval="1200" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">
                                    formHeight
                                </label>
                                <div class="layui-input-inline">
                                    <input type="text" name="height" fieldname="formHeight" placeholder="" lay-verify="int" lay-vertype="tips" minval="20" maxval="900" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item" style="margin-bottom:0px">
                            <label class="layui-form-label">
                                options
                            </label>
                            <div class="layui-input-block">
                                <textarea name="options" fieldname="options" placeholder="" lay-verify="obj" lay-vertype="tips" autocomplete="off" class="layui-textarea"></textarea>
                            </div>
                        </div>

                        <div class="layui-form-item" style="display:none">
                            <label class="layui-form-label"></label>
                            <div class="layui-input-block">
                                <input type="button" lay-submit lay-filter="tool-formOptions-form-submit" value="保存" class="layui-btn layui-btn-default">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="layui-card" style="margin-bottom:40px">
                <div class="layui-card-header">View Code</div>
                <div class="layui-card-body">
                    <div id="tool-tableCodeView" style="width:100%;height:800px"></div>
                </div>
            </div>
        </div>

        <div class="layui-layout-admin">
            <div class="layui-input-block">
                <div class="layui-footer re-text-align-c" lay-filter="tool-tableConfig-footer">
                    <!--<button type="button" class="layui-btn layui-btn-default" lay-event="updatCols">更新或新增列</button>
                    <button type="button" class="layui-btn layui-btn-danger" lay-event="delCols">删除列</button>-->
                    <button type="button" class="layui-btn layui-btn-danger" lay-event="copyTable">复制到新表格</button>
                    <button type="button" class="layui-btn layui-btn-danger" lay-event="newTable">新表格</button>
                    <button type="button" class="layui-btn layui-btn-default" lay-event="tableView" style="margin-left:30px">预览</button>
                    <button type="button" class="layui-btn layui-btn-default" lay-event="saveConfig">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use('reTable', function () {
        var $ = layui.$
            , reTable = layui.reTable
            , table = layui.table
            , reForm = layui.reForm
            , form = layui.form
            , view = layui.view
            , admin = layui.admin;

        //初始json编辑器
        var jsonEditor = new JSONEditor($("#tool-tableCodeView")[0], {
            mode: 'form',
            modes: ['code', 'form', 'text', 'tree', 'view']
        }, null);
        $('.jsoneditor-poweredBy').remove();

        //读取本地数据
        var tempTable = admin.getLocalData('tempTable') ? JSON.parse(admin.getLocalData('tempTable')) : {};

        //初始默认列
        var tableCols = tempTable.tableCols && admin.hasArray(tempTable.tableCols) ? tempTable.tableCols : [{ cellOrder: 1, field: 'new field', cellName: '新的列名称', cellName_EN: 'new cell English name' }, { cellOrder: 99, field: 'tool', cellName: '操作', cellName_EN: 'Operation', width: 120, algin: 'center', fixed: 'right' }];

        //代码预览
        function viewCode() {
            var result = admin.getLocalData('tempTable');
            jsonEditor.setText(result);
        }
        //加载Form
        function initData() {
            jsonEditor.setText(null);
            $('[lay-filter="tool-tableConfig-form"]')[0].reset();
            $('[lay-filter="tool-tableOptions-form"]')[0].reset();
            $('[lay-filter="tool-formOptions-form"]')[0].reset();
            if (admin.hasObject(tempTable)) {

                reForm.loadFormData(tempTable, 'tool-tableConfig-form');
                reForm.loadFormData(tempTable.tableOptions, 'tool-tableOptions-form');
                reForm.loadFormData(tempTable.formOptions, 'tool-formOptions-form');

                beautify();
                viewCode();
            }

        }

        //js格式化
        function jsBeautify(obj) {
            var js_source = obj.val().replace(/^\s+/, '');
            if (js_source.length == 0)
                return false;

            var fjs = js_beautify(js_source, 1, '\t');
            obj.val(fjs);
        }

        function beautify() {

            ['toolFun', 'toolbarFun', 'tableEvent', 'options'].forEach(function (k, v) {
                var obj = $('[lay-filter="tool-tableConfig-form"] [name="' + k + '"]');
                //obj.css({ 'min-height': '30px' });
                reForm.expandingArea(obj[0]);
                jsBeautify(obj);
                obj.blur(function () {
                    jsBeautify($(this));
                })
            });
            ['options', 'where'].forEach(function (k, v) {
                var obj = $('[lay-filter="tool-tableOptions-form"] [name="' + k + '"]');
                //obj.css({ 'min-height': '30px' });
                reForm.expandingArea(obj[0]);
                jsBeautify(obj);
                obj.blur(function () {
                    jsBeautify($(this));
                })
            });
            ['options'].forEach(function (k, v) {
                var obj = $('[lay-filter="tool-formOptions-form"] [name="' + k + '"]');
                //obj.css({ 'min-height': '30px' });
                reForm.expandingArea(obj[0]);
                jsBeautify(obj);
                obj.blur(function () {
                    jsBeautify($(this));
                })
            });

            beautifyTableCols();
        }
        function beautifyTableCols() {

            ['templetFun'].forEach(function (k, v) {
                var obj = $('[lay-filter="tool-tableCols-form"] [name="' + k + '"]');
                //obj.css({ 'min-height': '30px' });
                reForm.expandingArea(obj[0]);
                jsBeautify(obj);
                obj.blur(function () {
                    jsBeautify($(this));
                })
            });
        }

        //刷新表格列
        function reloadTableCols(options) {
            //删除不存在或空的列
            var loop = tableCols.length;
            for (var i = 0; i < loop; i++) {
                if (!tableCols[i].field) {
                    tableCols.splice(i, 1);
                    i--;
                    loop--;
                }
            }
            //根据顺序排序
            tableCols.sort(admin.sortBy('cellOrder'));
            $.each(tableCols, function (idx, json) {
                $.each(json, function (k, v) {
                    if (json.field !== 'tool')
                        json.cellOrder = idx + 1;
                })
            })
            //更新本地存储
            tempTable.tableCols = tableCols;
            admin.localData('tempTable', admin.stringify(tempTable));
            //更新代码预览
            viewCode();
            //刷新表格列
            table.reload('tool-tableCols-table', $.extend({ data: tableCols, limit: tableCols.length }, options));
        };
        //初始table
        function initTable() {
            reTable.initTable({
                tableId: 'tool-tableCols'
                , tableOptions: {
                    fullHeight: false
                    , isPage: false
                    , idField: 'cellOrder'
                    , initSort: { field: 'cellOrder', type: 'asc' }
                    , cellMinWidth: 140
                    , data: tableCols
                    , cols: [[
                        { type: 'numbers', fixed: 'left' }
                        , { field: 'field', title: '字段', sort: true, fixed: 'left', edit: 'text' }
                        , { field: 'cellName', title: '列名', sort: true, edit: 'text' }
                        , { field: 'cellName_EN', title: '列英名', sort: true, edit: 'text' }
                        , { field: 'cellOrder', title: '列顺序', width: 90, align: 'center', sort: true, edit: 'text' }
                        , { field: 'width', title: '列宽', width: 80, align: 'right', sort: true, edit: 'text' }
                        , { field: 'minWidth', title: '列最小宽', width: 110, align: 'right', sort: true, edit: 'text' }
                        , { field: 'align', title: '列对齐', width: 140, align: 'center', sort: true, templet: '#tool-tableCols-align' }
                        , { field: 'sort', title: '允许排序', width: 110, align: 'center', sort: true, templet: '#tool-tableCols-sort' }
                        , { field: 'fixed', title: '列固定位置', width: 150, align: 'center', sort: true, templet: '#tool-tableCols-fixed' }

                    ]]
                }
                , tableEvent: function () {
                    table.on('row(tool-tableCols-table)', function (obj) {
                        reForm.loadFormData(obj.data, 'tool-tableCols-form');

                        beautifyTableCols();

                        obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
                    });
                    table.on('edit(tool-tableCols-table)', function (obj) {
                        obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');

                        var setValue = obj.value;
                        var cellName = '';

                        if (obj.field === 'field') {
                            cellName = '字段';
                            setValue = admin.trimAll(obj.value);

                            if (setValue === '') {
                                layer.tips(cellName + '不能为空', this);
                                reloadTableCols();
                                return;
                            }
                            if (setValue.length > 50) {
                                layer.tips(cellName + '长度请不要超过50个字符...', this);
                                reloadTableCols();
                                return;
                            }
                            var fieldData = admin.filterList(tableCols, { field: setValue });
                            if (fieldData.length > 0) {
                                layer.tips(cellName + setValue + '已存在', this);
                                reloadTableCols();
                                return;
                            }
                        }

                        if (obj.field === 'cellOrder') {
                            cellName = '列顺序';

                            if (!reForm.regular.int.test(setValue)) {
                                layer.tips(cellName + '请输入整数...', this);
                                setValue = tableCols.length;
                            }
                            if (setValue > 99) {
                                layer.tips(cellName + '请不要大于99...', this);
                                setValue = 99;
                            }
                        }

                        if (obj.field === 'width') {
                            cellName = '列宽';

                            if (!reForm.regular.int.test(setValue)) {
                                layer.tips(cellName + '请输入整数...', this);
                                setValue = '';
                            }

                            if (setValue > 600) {
                                layer.tips(cellName + '请不要大于600...', this);
                                setValue = '';
                            }

                            if (setValue < 80) {
                                layer.tips(cellName + '请不要小于80...', this);
                                setValue = '';
                            }

                        }

                        if (obj.field === 'minWidth') {
                            cellName = '列最小宽';

                            if (!reForm.regular.int.test(setValue)) {
                                layer.tips(cellName + '请输入整数...', this);
                                setValue = '';
                            }

                            if (setValue > 400) {
                                layer.tips(cellName + '请不要大于400...', this);
                                setValue = '';
                            }

                            if (setValue < 80) {
                                layer.tips(cellName + '请不要小于80...', this);
                                setValue = '';
                            }

                        }

                        $(this).val(setValue);

                        form.val('tool-tableCols-form', obj.data);
                        if (obj.field === 'field') {
                            obj.data.cellName = setValue;
                            obj.data.cellName_EN = setValue;

                            if (obj.data.templet)
                                delete obj.data.templet;
                            if (obj.data.templetFun)
                                delete obj.data.templetFun;

                            tableCols.push(obj.data);
                            form.val('tool-tableCols-form', obj.data);
                            reloadTableCols({ initSort: { field: 'cellOrder', type: 'asc' } });
                        } else {
                            $.each(tableCols, function (idx, json) {
                                if (obj.data.field === json.field) {
                                    json[obj.field] = setValue;
                                    if (obj.field === 'cellOrder') {
                                        reloadTableCols({ initSort: { field: 'cellOrder', type: 'asc' } });
                                        return;
                                    }
                                    return;
                                }
                            });
                        }
                    });
                }
            });
        }

        //渲染form
        form.render(null, 'tool-tableCols-form');
        form.render(null, 'tool-tableConfig-form');
        form.render(null, 'tool-tableOptions-form');
        form.render(null, 'tool-formOptions-form');
        form.verify(reForm.verify);

        //提交表格字段
        form.on('submit(tool-tableCols-form-submit)', function (data) {

            beautifyTableCols();

            var subData = reForm.getFilterFormData(data, 'tool-tableCols-form');

            var fieldData = admin.filterList(tableCols, { field: subData.field });
            if (fieldData.length > 0) {
                $.each(tableCols, function (idx, json) {
                    if (json.field === subData.field) {
                        if (json.templet)
                            delete json.templet;
                        if (json.templetFun)
                            delete json.templetFun;

                        tableCols.splice(idx, 1, $.extend({}, json, subData));
                        return false;
                    }
                });
            }
            else
                tableCols.push(subData);

            reloadTableCols();
            return false;
        });
        //提交表格删除
        form.on('submit(tool-tableCols-form-del)', function (data) {

            $.each(tableCols, function (idx, json) {
                if (json.field === data.field.field) {
                    tableCols.splice(idx, 1);
                    form.val('tool-tableCols-form', tableCols[idx - 1 > 0 ? idx - 1 : 0])
                    return false;
                }
            });
            reloadTableCols();

            return false;
        });
        //单元格开关事件
        form.on('switch(tool-tableCols-cellSwitch)', function (obj) {
            var arry = this.name.split('.');
            $.each(tableCols, function (idx, json) {
                if (arry[1] === json.field) {
                    if (!obj.elem.checked)
                        delete json[arry[0]];
                    else
                        json[arry[0]] = true;
                    return;
                }
            });
        });
        //单元格单选事件
        form.on('radio(tool-tableCols-cellRadio)', function (obj) {
            var arry = this.name.split('.');
            $.each(tableCols, function (idx, json) {
                if (arry[1] === json.field) {
                    if (!obj.value)
                        delete json[arry[0]];
                    else
                        json[arry[0]] = obj.value;
                    return;
                }
            });
        });
        //提交表格基础配置
        form.on('submit(tool-tableConfig-form-submit)', function (data) {
            var tableConfig = reForm.getFilterFormData(data, 'tool-tableConfig-form');

            if (tableConfig.options) {
                var tableConfigObj = admin.parse(JSON.stringify(tableConfig.options));
                if (admin.hasObject(tableConfigObj)) {
                    $.extend(tableConfig, tableConfigObj);
                }
            }

            tableConfig.tableOptions = tempTable.tableOptions;
            tableConfig.formOptions = tempTable.formOptions;
            tableConfig.tableCols = tableCols;

            tempTable = tableConfig;

            admin.localData('tempTable', admin.stringify(tempTable));
            viewCode();
            return false;
        });
        //提交表格tableOptions
        form.on('submit(tool-tableOptions-form-submit)', function (data) {

            var tableOptions = reForm.getFilterFormData(data, 'tool-tableOptions-form');

            if (tableOptions.options) {
                var tableOptionsObj = admin.parse(JSON.stringify(tableOptions.options));
                if (admin.hasObject(tableOptionsObj)) {
                    $.extend(tableOptions, tableOptionsObj);
                }
            }

            tempTable.tableOptions = tableOptions;

            admin.localData('tempTable', admin.stringify(tempTable));
            viewCode();
            return false;
        });
        //提交表格formOptions
        form.on('submit(tool-formOptions-form-submit)', function (data) {

            var formOptions = reForm.getFilterFormData(data, 'tool-formOptions-form');

            if (formOptions.options) {
                var formOptionsObj = admin.parse(JSON.stringify(formOptions.options));
                if (admin.hasObject(formOptionsObj)) {
                    $.extend(formOptions, formOptionsObj);
                }
            }

            tempTable.formOptions = formOptions;

            admin.localData('tempTable', admin.stringify(tempTable));
            viewCode();
            return false;
        });

        var footerFun = {

            saveConfig: function () {
                reloadTableCols();
                beautify();

                var tableConfig = reForm.getFormData('[lay-filter="tool-tableConfig-form"]');
                if (!tableConfig.TableName || !tableConfig.TableName_EN || !tableConfig.TableNo) {
                    $('[lay-filter="tool-tableConfig-form-submit"]').click();
                    view.warn('表格名称、表格英文名称、表格编号不能为空。')
                    return false;
                }

                var tableOptions = reForm.getFormData('[lay-filter="tool-tableOptions-form"]');
                if (!tableOptions.url) {
                    $('[lay-filter="tool-tableOptions-form-submit"]').click();
                    view.warn('表格url不能为空。')
                    return false;
                }

                if (tableConfig.options) {
                    var tableConfigObj = admin.parse(JSON.stringify(tableConfig.options));
                    if (admin.hasObject(tableConfigObj))
                        $.extend(tableConfig, tableConfigObj);
                }

                if (tableOptions.options) {
                    var tableOptionsObj = admin.parse(JSON.stringify(tableOptions.options));
                    if (admin.hasObject(tableOptionsObj))
                        $.extend(tableOptions, tableOptionsObj);
                }
                if (tableOptions.cellMinWidth)
                    tableOptions.cellMinWidth = parseInt(tableOptions.cellMinWidth);

                var formOptions = reForm.getFormData('[lay-filter="tool-formOptions-form"]');

                if (formOptions.options) {

                    var formOptionsObj = admin.parse(JSON.stringify(formOptions.options));

                    if (admin.hasObject(formOptionsObj))
                        $.extend(formOptions, formOptionsObj);
                    
                }

                tableConfig.tableOptions = tableOptions;
                tableConfig.formOptions = formOptions;

                $.each(tableCols, function (idx, json) {

                    $.each(json, function (k, v) {

                        if (v === null || admin.trimAll(v) === '')
                            delete json[k];

                        if (json.LAY_TABLE_INDEX)
                            delete LAY_TABLE_INDEX;

                        if (json.width)
                            json.width = parseInt(json.width);

                        if (json.minWidth)
                            json.width = parseInt(json.minWidth);


                    })
                })

                tableConfig.tableCols = tableCols;

                admin.localData('tempTable', admin.stringify(tableConfig));
                viewCode();
                var subData = {
                    TableID: tableConfig.TableID
                    , TableName: tableConfig.TableName
                    , TableName_EN: tableConfig.TableName_EN
                    , TableNo: tableConfig.TableNo
                    , tempTable: admin.stringify(tableConfig)
                };

                admin.req({
                    url: '/Tool/saveTable'
                    , type: 'post'
                    , data: subData
                    , loading: true
                    , tipOk: true
                    , done: function (res) {
                        if (res.result && !layui.router().search.tableId) {
                            tableConfig.TableID = res.result;
                            admin.localData('tempTable', admin.stringify(tableConfig));
                            location.hash = '/admin/tool/tableConfig/tableId=' + res.result;
                        }
                    }
                });

            }
            , tableView: function () {
                if (!$('[lay-filter="tool-tableConfig-form"] [name="TableID"]').val())
                    return view.warn('请先保存表格'), false;
                location.hash = '/template/list/TableNo=' + tempTable.TableNo
            }
            , copyTable: function () {
                delete tempTable.TableID;
                delete tempTable.TableNo;
                admin.localData('tempTable', admin.stringify(tempTable));
                if (layui.router().search.tableId)
                    location.hash = '/admin/tool/tableConfig'
                else {
                    $('[lay-filter="tool-tableConfig-form"] [name="TableID"]').val('');
                    $('[lay-filter="tool-tableConfig-form"] [name="TableNo"]').val('');
                }
            }
            , newTable: function () {
                admin.localData('tempTable');
                if (layui.router().search.tableId)
                    location.hash = '/admin/tool/tableConfig'
                else {
                    tableCols = [{ cellOrder: 1, field: 'new field', cellName: '新的列名称', cellName_EN: 'new cell English name' }, { cellOrder: 99, field: 'tool', cellName: '操作', cellName_EN: 'Operation', width: 120, algin: 'center', fixed: 'right' }];
                    tempTable = {};
                    reloadTableCols();
                    initData();
                }
            }
        }

        $('[lay-filter="tool-tableConfig-footer"] .layui-btn').on('click', function () {
            var type = $(this).attr('lay-event');
            footerFun[type] ? footerFun[type].call(this) : '';
        });
        if (layui.router().search.tableId) {
            admin.req({
                type: 'post'
                , data: { dataId: layui.router().search.tableId }
                , url: '/Tool/getTableInfo'
                , postLoad: true
                , done: function (res) {
                    tempTable = JSON.parse(res.data.tempTable);
                    tempTable.TableID = res.data.TableID;
                    tableCols = tempTable.tableCols;

                    admin.localData('tempTable', admin.stringify(tempTable));

                    initTable();
                    initData();
                }
            })
        }
        else {
            //setTimeout(function(){ reloadTableCols(); }, 500);
            initTable();
            initData();
        }
    });
</script>